<template>
  <view class="box">


    <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="4000" indicator-active-color="rgba(255,255,255,0.5)"
            :duration="500">
      <swiper-item v-for="it in urls" :key="it.id">
        <view class="swiper-item">
          <image :src="it" mode="aspectFill" @click="toPage(it.url)"></image>
        </view>
      </swiper-item>
    </swiper>

    <view class="box-content" style="padding: 20rpx 0;">
      <waterfall ref="helangWaterfall" :hideList="hideList" imageKey="imgUrl" @statusChange="handleStatusChange">
        <template v-slot:default="{ list, colWidth }">
          <waterfall-col v-for="(colItem,colIndex) in list" :key="colIndex" :colWidth="colWidth">
            <template>
              <waterfall-item v-for="(item,index) in colItem" :key="item.id" :colIndex="colIndex"
                              @height="onRenderHeight">
                <view class="content" @click="handleClick(item)" :data-col_index="colIndex"
                      :data-item_index="index">
                  <image class="image" mode="widthFix" :src="item.imgUrl"
                         :style="{height:item.__waterfall_imageHeight}">
                    <!-- 必须给图片的高度这事为 __waterfall_imageHeight 属性的高 -->
                  </image>
                  <view class="card-header">
                    <view class="card-header-l">￥222222</view>
                    <view class="card-header-r">
                      已售{{show}}
                      <text style="margin-left: 10rpx;font-weight: bold;">22</text>
                    </view>
                  </view>
                  <view class="title" style="margin-bottom: 20rpx;">咨询服务</view>
                  <view class="card-footer">
                    <view class="card-footer-btn">立即购买</view>
                  </view>
                </view>
              </waterfall-item>
            </template>
          </waterfall-col>
        </template>
        <template #tips>
          <view class="load-txt">
            <block v-if="waterfall.status === 'noData'">
              <view style="padding-top: 30rpx;">已经滑倒底啦~</view>
            </block>
            <block v-else>
              <view v-if="hideList">
                <template v-if="waterfall.status === 'fail'">
                  <image src="http://cdn.uviewui.com/uview/empty/data.png" mode="aspectFit">
                  </image>
                  <view>数据异常</view>
                </template>
                <template v-else-if="waterfall.status === 'empty'">
                  <image src="http://cdn.uviewui.com/uview/empty/data.png" mode="aspectFit">
                  </image>
                  <view>暂无内容</view>
                </template>
              </view>
              <view v-else style="padding-top: 30rpx;">加载中</view>
            </block>
          </view>
        </template>
      </waterfall>
    </view>

  </view>
</template>

<script>
// 瀑布流组件
import Waterfall from "@/components/waterfall/waterfall-list";
import WaterfallCol from "@/components/waterfall/waterfall-col";
import WaterfallItem from "@/components/waterfall/waterfall-item";
// 列表接口模拟数据，真是项目不需要
import mockData from '../consultingServices/mock-data/waterfall-list.js'

export default {
  components: {
    "waterfall": Waterfall,
    "waterfall-col": WaterfallCol,
    "waterfall-item": WaterfallItem
  },
  computed: {
    hideList() {
      return ['fail', 'empty'].includes(this.waterfall.status);
    }
  },
  data() {
    return {
      // 异步请求相关
      ajax: {
        // 是否可以加载
        load: true,
        // 每页的请求条件
        rows: 10,
        // 页码
        page: 1,
        // 数据列表
        dataList: []
      },
      // 瀑布流组件相关
      waterfall: {
        status: '',
        renderEnd: true
      },
      urls: [
        'https://picsum.photos/200/300?1',
        'https://picsum.photos/200/300?2',
        'https://picsum.photos/200/300?3',
        'https://picsum.photos/200/300?4'
      ],
      show: ''
    }
  },
  onReady() {
    // 获取胶囊按钮的位置信息
    let menuButtonRect = wx.getMenuButtonBoundingClientRect();
    console.log("Menu button rect:", menuButtonRect);

    this.top = menuButtonRect.top

    this.height = menuButtonRect.height

  },
  onLoad(e) {


    this.getList();


  },
  // 触底触发
  onReachBottom() {
    this.getList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    // 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
    this.ajax.page = 1;
    this.ajax.load = true;
    this.getList(this.ajax.page);
  },
  methods: {
    // 监听渲染高度，此事件为必用
    onRenderHeight(e) {
      const {
        colIndex,
        height
      } = e;
      // 上报当前高度，上报后会自动触发下一项数据的渲染
      this.$refs.helangWaterfall.reportHeight(colIndex, height);
    },
    // 获取数据
    getList() {

      // 请求和渲染未完成前禁止发起请求
      if (!this.ajax.load || !this.waterfall.renderEnd) {
        return;
      }
      this.ajax.load = false;

      // 请求数据， mockData.getList 示例一个 ajax 请求
      mockData.getList({page: this.ajax.page}).then(res=>{
        // 获取到的数据，请注意数据结构
        console.log(res);

        // 第一页数据执行以下代码
        if (this.ajax.page == 1) {
          // 关闭下拉
          uni.stopPullDownRefresh();
        }

        // 数据无效时处理
        if (res.data.length === 0) {
          // 设置提示内容
          if(this.ajax.page === 1) {
            this.waterfall.status = 'empty'
          } else {
            this.waterfall.status = 'noData'
          }
          //this.waterfall.status = this.ajax.page === 1 ? 'fail' : 'empty';
          return;
        }

        // 当前页面页面为1时，表示列表重绘，场景一般是 刷新/搜索 时
        const reset = this.ajax.page === 1 ? true : false;
        // 若是重绘列表的话，需要取消 `hideList`属性，隐藏状态下会引发列表尺寸获取错误的问题
        if (reset) {
          this.waterfall.status = '';
        }
        if(res.data.length < 10) {
          this.waterfall.status = 'noData'
        }
        // res.data.forEach(i=>{
        // 	i.recommend.recommend_arr.forEach(i => {
        // 		i += '?imageView2/1/w/40/h/40'
        // 	})
        // })
        console.log('this.waterfall.status',this.waterfall.status)
        // 调用 render 方法，使组件开始进入渲染阶段
        this.$refs.helangWaterfall.render(res.data, reset);
        this.ajax.load = true;
        this.ajax.page++;
      })
    },
    // 导航状态切换演示监听
    onStatusChange() {
      const vlaues = ['', 'fail', 'empty'];
      const labels = ['正常展示', '加载异常', '无结果'];
      uni.showActionSheet({
        itemList: labels,
        success: (res) => {
          this.waterfall.status = vlaues[res.tapIndex];
        }
      });
    },
    // 瀑布流组件点击事件
    handleClick(e) {
      uni.navigateTo({
        url:'/pagesA/shopping/detail?id='+e.id+'&type='+this.type+'&business_card_id='+this.business_card_id + '&nickname=' + this.nickname
      })
    },
    // 处理瀑布流渲染状态
    handleStatusChange(status) {
      if (status === 'RENDER_END') {
        this.waterfall.renderEnd = true;
      } else {
        this.waterfall.renderEnd = false;
      }
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #FEBC9A;
}

.box {
  width: 100%;
  position: relative;
}

.box-content {
  // width: 100%;
  // position: absolute;
  // top: 200rpx;
  // left: 0;
}

.content {
  padding-bottom: 20rpx;
  background-color: white;
  border-radius: 4px;
  line-height: 1.3;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  position: relative;
  .image {
    display: block;
    width: 100%;
    height: auto;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
  }

  .ellipsis-1 {
    white-space: nowrap; // 强制一行显示
    overflow: hidden; // 超出隐藏
    text-overflow: ellipsis; // 省略号
  }

  .title {
    font-size: 28rpx;
    color: #666;
    font-weight: bold;
    margin: 20rpx 0;
    padding: 0 20rpx;
    box-sizing: border-box;
  }

  .shop {
    font-size: 24rpx;
    color: #666;
    margin-top: 20rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
  }

  .label {
    padding: 10rpx 20rpx;
    border-radius: 100px;
    background-color: #F00;
    color: white;
    font-size: 24rpx;
    display: inline-block;
    line-height: 1;
    padding: 0 20rpx;
    box-sizing: border-box;
  }

  .money {
    font-size: 28rpx;
    color: #F00;
    margin-top: 10rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
  }
}

.load-txt {
  padding: 0;
  text-align: center;
  color: #fff;
  font-size: 24rpx;
}

.load-icon {
  width: 300rpx;
  height: 300rpx;
  margin: 0 auto 20rpx auto;
  display: block;
}

.status-change {
  position: fixed;
  left: 10rpx;
  top: 60%;
  width: 80rpx;
  height: 80rpx;
  z-index: 100;
  font-size: 24rpx;
  border-radius: 50%;
  background-color: #f00;
  color: #fff;
  line-height: 1;
  opacity: .7;
  box-shadow: 0 0 10px black;

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.bg {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

.tabs {
  width: 710rpx;
  margin: 0 auto;
  margin-bottom: 0;
  background: white;
  border-radius: 20rpx;

  .tabs-search {
    box-sizing: border-box;
    padding: 30rpx 20rpx 20rpx;
  }

  .tabs-list {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    margin-bottom: 10rpx;
    padding: 10rpx 0;

    .tab-item {

      display: inline-block;
      margin: 0 20rpx;
      padding-bottom: 20rpx;
      text-align: center;

      &>view {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #131313;
        display: flex;
        align-items: center;
      }
    }

    .tab-item-ac {

      &>view {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #12B475;
        position: relative;
        font-weight: bold;
      }
    }
  }
}

.card-footer {
  width: 100%;
  border-top: 1rpx solid #e6e6e6;
  padding: 20rpx 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .card-footer-item {
    width: 50rpx;
    font-size: 22rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #4D4D4D;
    position: relative;
    image {
      width: 30rpx;
      height: 30rpx;
    }
    button {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
      opacity: 0;
    }
  }
  .card-footer-item1 {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4D4D4D;
    font-size: 22rpx;
    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 5rpx;
    }
  }

  .card-footer-btn {
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    color: #fff;
    background: #ED6B2D;
    border-radius: 10rpx;
    padding: 15rpx 15px;
    margin-left: 5rpx;
    margin-right: 20rpx;
  }
  .card-footer-btn-ac {
    width: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    color: #ED6B2D;
    border:1rpx solid #ED6B2D;
    border-radius: 10rpx;
    padding: 15rpx 15px;
    margin-left: 5rpx;
  }
}

.card-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 20rpx 0;
  box-sizing: border-box;

  .card-header-l {
    font-size: 28rpx;
    color: #F66061;
    font-weight: bold;
  }

  .card-header-r {
    font-size: 24rpx;
    color: #838383;
    font-weight: bold;

    text {
      color: #F65F61;
      font-weight: 300;
    }
  }
}

.card-share {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx;
  // margin-bottom: 20rpx;

  .card-share-tx {
    width: 100%;
    color: #9F9F9F;
    margin-bottom: 10rpx;
    font-weight: 300;
    font-size: 26rpx;
  }
}
.card-yg {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  padding-top: 20rpx;
  .card-yg-l {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rpx 0;
    font-size: 18rpx;
    color: #898386;
    background: #FCEBF2;
    text {
      color: #F38C8D;
      font-size: 18rpx;
    }
    border-radius: 10rpx;
    border-bottom-right-radius: 40rpx;
    border-top-left-radius: 40rpx;
  }
  .card-yg-r {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rpx 0;
    font-size: 18rpx;
    color: #898386;
    background: #EDECFD;
    text {
      color: #7EA1FA;
      font-size: 18rpx;
    }
    border-radius: 10rpx;
    border-bottom-right-radius: 40rpx;
    border-top-left-radius: 40rpx;
  }
}
.card-fx {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  font-size: 24rpx;
  color: #979797;
  text {
    color: #F35E67;
  }
}
.swiper {
  padding-bottom: 30rpx;
  width: 100%;
  height: 450rpx;
  .swiper-item {
    //300   180
    width: 100%;
    height: 450rpx;
    image {
      width: 100%;
      height: 450rpx;
    }
  }
}
.header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  z-index: 999999;
  background: white;
}
.barTitle {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  position: relative;
}
.barTitle-left {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 30rpx;
}
.barTitle-name {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  text-align: center;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coach-header-select {
  width: 124rpx;
  height: 50rpx;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 25rpx;
  margin-left: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFang SC;
  font-weight: 300;
  font-size: 24rpx;
  color: #FFFFFF;

  image {
    width: 17rpx;
    height: 8rpx;
    margin-left: 10rpx;
  }
}
.card-city {
  position: absolute;
  left: 10rpx;
  top: 10rpx;
  padding: 10rpx;
  background: #ED6B2D;
  font-size: 16rpx;
  transform: scale(0.9);
  color: white;
  border-radius: 10rpx;
}
.cart-btn-ac {
  border: 1rpx solid #FF940F;
  color: #FF940F;

}

</style>